<script setup>
  import { ref } from 'vue';
  const props = defineProps({
    hotData: {
      type: Object,
      required: true,
    },
    Title: {
      type: String,
      required: true,
    },
    widthLevel: {
      type: String,
      required: false,
      default: '22vw',
    },
  });

  function openWebsite(url) {
    window.open(url, '_blank');
  }
</script>

<template>
  <div class="card_N4 color_white" :style="{ width: widthLevel }">
    <div class="text_H4" style="height: 11%">{{ Title }}</div>
    <div class="text_H4" style="height: 11%"></div>
    <div @click="openWebsite(item.url)" style="width: 100%; display: flex" v-for="(item, index) in hotData">
      <div class="text_H6" style="width: 1.5rem">{{ item.index }}</div>
      <a class="text_H5" style="overflow: hidden">
        {{ item.title }}
      </a>
    </div>
  </div>
</template>
<style scoped></style>
